<script lang="ts" setup name="Father">
    import { ref } from 'vue';
    import AtguiguInput from './AtguiguInput.vue';

    let myUsername = ref('zhangsan');
    let myPassword = ref('123456');
</script>

<template>
    <div class="father">
        <h2>父组件</h2>
        <h3>{{ myUsername }}</h3>
        <!-- v-model用在html标签上 -->
        <!-- <input v-model="username"/> -->
        <!-- 上面的本质就是下面： -->
        <!-- <input :value="username" @input="username = (<HTMLInputElement>$event.target).value"/> -->
        
        <!-- v-model用在组件上 -->
        <!-- <AtguiguInput v-model="username"/> -->
        <!-- 上面的本质就是下面： -->
        <!-- <AtguiguInput :modelValue="username" @update:modelValue="username = $event"/> -->
        <!-- 为什么上面不写$event.target.value？
                1. 对于原生事件，$event是事件对象，这时能.target
                2. 对于自定义事件，$event是触发事件时传递的数据，这时不能.target
        -->

        <!-- 修改modelValue。通过下面这种冒号后取别名的方式，可以替换原来的modelValue。 -->
        <AtguiguInput v-model:username="myUsername" v-model:password="myPassword"/>
    </div>
</template>

<style scoped>
    .father {
        background-color: gray;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 0 10px;
    }
    .son2 {
        margin-top: 10px;
    }
</style>